﻿
<script src="~/vue/dist/vue.global.js"></script>
<link href="~/element-plus/dist/index.css" rel="stylesheet" />
<script src="~/element-plus/dist/index.full.js"></script>
<script src="~/axios/dist/axios.js"></script>

<div id="app" width="100%" height="100%">
    <font color="black"> 您正在做的业务是：人力资源--客户化设置--人力资源档案管理设置--公共属性设置  </font>
    <br />
    <div style="display: flex; justify-content: flex-end;">
        <el-button method="post" v-on:click="CPCAdd()" >添加</el-button>
    </div>
   @*  <el-button method="post" v-on:click="CPCAdd()" style="display: flex; justify-content: flex-end;">添加</el-button> *@
    @* <template> *@
    <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="attributeKind" label="属性种类"></el-table-column>
        <el-table-column prop="attributeName" label="属性名称"></el-table-column>
        <el-table-column prop="" label="删除">
            <template #default="scope">
                @* <a v-on:click="CPCDelete(scope.row.pbcId)">删除</a> *@
                <el-button size="small"
                           type="danger"
                           v-on:click="CPCDelete(scope.row.pbcId)">
                    删除
                </el-button>
            </template>
        </el-table-column>
    </el-table>
    <div id="pageDiv">
        <span class="span1">  总数：{{pageCount}} 例    当前第{{pageIndex}}页 /每页显示 {{pageSize}} 条    共 {{page}} 页  </span>
        <div class="div">
            <button v-on:click="HomePage()">首页</button>
            <button v-on:click="PreviousPage()">上一页</button>
            <button v-on:click="NextPage()">下一页</button>
            <button v-on:click="LastPage()">尾页</button>
            跳到第
            <input type="text" style="width: 30px;height: 20px;" v-model="pages">
            <a>页</a>
            <button v-on:click="GoTo()">
                <img src="~/images/go.bmp" />
            </button>
        </div>
    </div>
    <el-dialog v-model="dialogVisible"
               title="删除"
               width="500"
               :before-close="handleClose">
        <span>确定删除该数据吗?</span>
        <template #footer>
            <div class="dialog-footer">
                <el-button v-on:click="cpcsdelete()" type="danger">删除</el-button>
                <el-button type="primary" v-on:click="close()">
                    取消
                </el-button>
            </div>
        </template>
    </el-dialog>
    @* </template> *@
</div>
<script type="text/javascript">
    const { createApp, ref, reactive,computed } = Vue
     const { ElMessage } = ElementPlus
     var app = createApp({
           setup()
             {
                  const pageCount = ref()//总记录数
            const pageIndex = ref(1)//当前页数
            const pageSize = ref(3)//
             const page = computed(() => {
                return Math.ceil(pageCount.value / pageSize.value)
            });//总页数
             // const page =   Math.ceil(pageCount.value / pageSize.value)
           //总页数
            const pages = ref()//跳转到的页数
                 //数据存放
              var tableData = ref([]);
                 const dialogVisible = ref(false)
                //公共属性查询
                  function CPCselect(){
                    axios.get("/CPC/CPCSelect",{
                    params:{
                        pageIndex:pageIndex.value,
                        pageSize:pageSize.value
                    }
                }).then(res => {
                    tableData.value = res.data
                    console.info(tableData.value)
                }).catch(Error => {
                    console.info(Error)
                })
              }
              //添加方法
              function CPCAdd(){
                   
       
              window.location.href='/CPC/CPCAdd'
              }
                          function close(){
                id.value = ""
                ElMessage({
                            type: 'info',
                            message: '你已取消删除！'
                        });
                dialogVisible.value  = false
            }


              const id =ref();
              //删除方法
             function CPCDelete(pbcId) {
                   dialogVisible.value=true;
                   id.value=pbcId;
              }
              //总页数
                        function Count(){
                axios.get("/CPC/SelectCount").then(res =>{
                    pageCount.value = res.data
                }).catch(Error => {
                    console.info(Error)
                })
            }



            function cpcsdelete(){
                  axios.delete('/CPC/CPCDelete',{
                    params:{
                        PbcId:id.value
                    }
                }).then(res => {
                    if(res.data > 0){
                        ElMessage({
                            type: 'success',
                            message: '删除成功！'
                        });
                           dialogVisible.value  = false
                        CPCselect();
                        Count();
                    }else{
                        ElMessage({
                            type: 'error',
                            message: '删除失败！'
                        });
                    }

                }).catch(Error => {
                    console.info(Error)
                })
            }
                    //首页
            function HomePage() {
            pageIndex.value = 1;
       CPCselect();
        }

            //上一页
            function PreviousPage() {
            if (pageIndex.value != 1) {
                pageIndex.value -= 1;
                CPCselect();
            }
        }

            //下一页
            function NextPage() {
            if (pageIndex.value != page.value) {
                pageIndex.value += 1;
                CPCselect();
            }
        }

            //尾页
            function LastPage() {
            pageIndex.value = page.value;
          CPCselect();
        }


            //转到页数
            function GoTo() {
                if (!isNaN(pages.value)) {
                    if (pages.value > page.value || pages.value < 1) {
                        alert("输入的页数有误！")
                        pages.value = ""
                    } else {
                        pageIndex.value = Number(pages.value)
                        pages.value = ""
                         CPCselect();
                    }
                } else {
                    alert('你输入的不是数字！')
                }
            }
                                  CPCselect();
                                  Count();
              return{
                  tableData,CPCselect,CPCAdd,CPCDelete,pageCount,pageIndex,pageSize,page,HomePage,PreviousPage,
                  NextPage,LastPage,GoTo,Count,pages,dialogVisible
                  ,cpcsdelete,id,close

              }
               }
     });
      app.use(ElementPlus)
     app.mount("#app");
</script>
<style>

    #app {
        background-color: #FFFFCC;
    }

    html {
        background-color: #FFFFCC;
    }

    body {
        background-color: #FFFFCC;
    }

    el-table__header-wrapper {
        background-color: #FFDB6F;
    }

    .div {
        width: 410px;
        height: 25px;
        /* background-color: black; */
        margin-left: 400px;
        margin-top: -26px;
        line-height: 25px;
    }

    .span1 {
        font-size: 15px;
    }

    .div button {
        margin: 0 5px;
        background-color: #00000000;
        border: 0px;
    }

    .div a {
        margin: 0 5px;
    }

    a {
        text-decoration: none;
        color: white;
    }

    #pageDiv {
        padding: 10px;
    }

    tbody, td, tfoot, th, thead, tr {
        border-color: inherit;
        background-color: #ffffbb;
        border-style: solid;
        border-width: 0;
    }

    .tableEdit {
        border: solid 1px #B5D6E6;
        border-collapse: collapse;
        width: 99%;
        margin: 5px;
    }

        .tableEdit th {
            text-align: left;
            padding: 5px 8px;
            border: solid 1px #B5D6E6;
            width: 35%;
            background-color: #ffdb6f;
        }

        .tableEdit td {
            width: 65%;
            text-align: left;
            padding: 5px 8px;
            border: solid 1px #B5D6E6;
        }

        .tableEdit thead {
            border: solid 1px #B5D6E6;
            background-color: #C1EBFF;
            padding: 5px;
            font-weight: bold;
        }
    
</style>
